import React, { memo } from 'react';
import { history } from 'umi';
import { useState, useEffect } from 'react';
import './index.css';
import styles from './index.less';
import { Layout, Menu } from 'antd';
import {
  AlignLeftOutlined,
  CopyOutlined,
  NumberOutlined,
  UploadOutlined,
} from '@ant-design/icons';

export default memo(function Index(props: any) {
  let [chkMu, setChkMu] = useState<string[]>([]);
  return (
    <div id="special" className={styles.special}>
      <Layout>
        <Layout.Sider style={{ background: '#e9ecef' }}>
          <div className={styles.left}>
            <Menu
              defaultSelectedKeys={['suggest']}
              selectedKeys={chkMu}
              mode="inline"
              style={{ background: '#e9ecef' }}
              items={[
                { label: '推荐', key: 'suggest', icon: <AlignLeftOutlined /> },
                { label: '咨询', key: '2', icon: <CopyOutlined /> },
                {
                  label: (
                    <p
                      style={{
                        background: '#ccced1',
                        height: '1px',
                        margin: '0',
                      }}
                    ></p>
                  ),
                  key: '3',
                  disabled: true,
                },
              ]}
              onSelect={(info) => {
                setChkMu([info.key]);
                console.log(info.key);
                history.push('/special/' + info.key);
              }}
            />
            <Menu
              selectedKeys={[]}
              mode="inline"
              style={{
                background: '#e9ecef',
                maxHeight: '300px',
                overflowY: 'auto',
                overflowX: 'clip',
              }}
              items={[
                { label: '前端', key: '4', icon: <NumberOutlined /> },
                { label: '后端', key: '5', icon: <NumberOutlined /> },
                { label: '小程序', key: '6', icon: <NumberOutlined /> },
                { label: 'ios', key: '7', icon: <NumberOutlined /> },
                { label: 'Android', key: '8', icon: <NumberOutlined /> },
              ]}
              onSelect={(info) => {
                setChkMu([]);
              }}
            />
            <Menu
              mode="inline"
              style={{ background: '#e9ecef' }}
              items={[
                {
                  label: (
                    <p
                      style={{
                        background: '#ccced1',
                        height: '1px',
                        margin: '0',
                      }}
                    ></p>
                  ),
                  key: '3',
                  disabled: true,
                },
                { label: '安谋科技XPU', key: '9', icon: <UploadOutlined /> },
                { label: '人工智能', key: '10', icon: <UploadOutlined /> },
              ]}
              // onSelect={(info) => {
              //   console.log(info);
              // }}
            />
          </div>
        </Layout.Sider>
        <Layout.Content>{props.children}</Layout.Content>
      </Layout>
    </div>
  );
});
